<template>
    <div class="reportCard">
        <template v-if="cardData.dataList && cardData.dataList.length">
            <div class="cardBox">
                <div
                    class="card"
                    v-for="(item, index) in cardData.dataList"
                    :key="index"
                >
                    <div class="card-radio">
                        <div
                            v-if="
                                item.examineState == 0 &&
                                    ($route.params.type == 'BG_ZT' ||
                                        $route.params.type == 'BG_LEVEL_XX' ||
                                        $route.params.type == 'BG_JXDW')
                            "
                            class="preview"
                            @click.stop="previewNo(item)"
                        >
                            <i class="el-icon-view"></i
                            ><span class="pl-5">预览未达标</span>
                        </div>
                        <div
                            v-if="
                                item.examineState == 0 &&
                                    ($route.params.type == 'BG_ZT' ||
                                        $route.params.type == 'BG_LEVEL_XX' ||
                                        $route.params.type == 'BG_JXDW')
                            "
                            class="upload"
                            @click.stop="upload(item)"
                        >
                            <i class="el-icon-upload2"></i
                            ><span class="pl-5">上传</span>
                        </div>
                        <div
                            v-if="
                                item.examineState == 2 &&
                                    ($route.params.type == 'BG_ZT' ||
                                        $route.params.type == 'BG_LEVEL_XX' ||
                                        $route.params.type == 'BG_JXDW')
                            "
                            class="preview"
                            @click.stop="preview(item)"
                        >
                            <i class="el-icon-view"></i
                            ><span class="pl-5">在线查看</span>
                        </div>
                        <div
                            v-if="
                                item.examineState == 2 &&
                                    ($route.params.type == 'BG_ZT' ||
                                        $route.params.type == 'BG_LEVEL_XX' ||
                                        $route.params.type == 'BG_JXDW')
                            "
                            class="upload"
                            @click.stop="downLoadFile(item)"
                        >
                            <i class="el-icon-download"></i
                            ><span class="pl-5">下载文件</span>
                        </div>
                        <div
                            v-if="
                                item.examineState == 2 &&
                                    !item.wordUrl &&
                                    ($route.params.type == 'BG_ZT' ||
                                        $route.params.type == 'BG_LEVEL_XX' ||
                                        $route.params.type == 'BG_JXDW')
                            "
                            class="preview upload-2"
                            @click.stop="upload(item)"
                        >
                            <i class="el-icon-upload2"></i
                            ><span class="pl-5">上传</span>
                        </div>
                        <div
                            class="preview edit"
                            v-if="
                                $route.params.type != 'BG_ZT' &&
                                    $route.params.type != 'BG_LEVEL_XX' &&
                                    $route.params.type != 'BG_JXDW'
                            "
                            @click.stop="jumpList(item)"
                        >
                            <i
                                :class="
                                    item.examineState == 0
                                        ? 'el-icon-edit'
                                        : 'el-icon-view'
                                "
                            ></i
                            ><span class="pl-5">{{
                                item.examineState == 0 ? "编辑" : "查看"
                            }}</span>
                        </div>
                        <div
                            v-if="item.examineState == 0"
                            class="preview upload-2"
                            @click.stop="remove(item)"
                        >
                            <i class="el-icon-delete"></i
                            ><span class="pl-5">删除</span>
                        </div>
                    </div>
                    <div class="check-status">
                        <i
                            v-if="item.examineState == 0"
                            class="el-icon-edit push"
                        ></i>
                        <i
                            v-if="item.examineState == 1"
                            class="el-icon-remove noChecked"
                        ></i>
                        <i
                            v-if="item.examineState == 2"
                            class="el-icon-success checked"
                        ></i>
                        <i
                            v-if="item.examineState == 3"
                            class="el-icon-error error"
                        ></i>
                    </div>
                    <div class="card-item">
                        <div class="top">
                            <div class="title">
                                {{
                                    item.reportName
                                        ? item.reportName.substring(0, 11)
                                        : ""
                                }}
                            </div>
                            <div class="title">
                                {{
                                    item.reportName
                                        ? item.reportName.substring(11)
                                        : ""
                                }}
                            </div>
                            <!-- <div class="subTitle">{{ item.rangeName }}</div> -->
                            <!-- <div class="year">{{ item.reportYear }}学年</div> -->
                        </div>
                        <div class="bottom">
                            <p>{{ item.objectName }}</p>
                            <p>
                                编制部门: {{ item.preparationDepartmentName }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="margin-t-10 margin-b-10 text-center">
                <el-pagination
                    @current-change="changePage"
                    :current-page.sync="searchFrom.pageIndex"
                    :page-size="searchFrom.pageSize"
                    layout="prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="cardData.total"
                >
                </el-pagination>
            </div>
        </template>
        <div class="emptyText" v-else>
            暂无数据
        </div>
        <!-- 预览弹窗 -->
        <el-dialog
            title="预览"
            :visible.sync="previewVisible"
            width="62%"
            top="2vh"
            :close-on-click-modal="false"
        >
            <div class="flex-sb">
                <div></div>
                <el-button
                    type="primary"
                    :disabled="!show"
                    icon="el-icon-download"
                    @click="downImgbase"
                    >下载</el-button
                >
            </div>
            <div class="preview" v-for="(item, i) of tableData" :key="i">
                <h3 class="my-10">
                    {{ tableData.length != 1 ? i + 1 + "、" : ""
                    }}{{ item.name }}未达标质控点统计
                </h3>
                <div class="flex-c">
                    <upStandard
                        :ref="`upStandardRef${i}`"
                        :className="`upStandardRef${i}`"
                        title="标准达标率"
                        :data="Number(item.reportCorrectValue)"
                    ></upStandard>
                </div>
                <targetList
                    :tableData="item.indexQualityPointInfoList"
                ></targetList>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="previewVisible = false"
                    >关 闭</el-button
                >
            </div>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            :close-on-click-modal="false"
            top="30vh"
            width="20%"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="文件类型" prop="fileVal">
                    <el-select
                        class="w-100 my-select"
                        :popper-append-to-body="false"
                        v-model="ruleForm.fileVal"
                        placeholder="请选择下载文件类型"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="download('ruleForm')"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import { getMonitorInfo } from '@/api/improve';
import {
    getReportDetail,
    uploadImg,
    onlinePreviewReport,
    downloadReport,
    delTarget
} from '@/api/report.js';
import upStandard from '@/components/echarts/up-standard';
import targetList from '@/components/cardToList/targetList';
import { getStorage } from '../../../dosm-front-new/src/config/utils';
const Base64 = require('js-base64').Base64;
export default {
    name: 'reportCard',
    components: { upStandard, targetList },
    props: {
        cardData: {
            type: Object
        }
    },
    data () {
        return {
            searchFrom: {
                pageIndex: 1,
                pageSize: 10
            },
            isShow: '',
            // 按钮&弹窗标题
            show: false,
            // 弹窗
            previewVisible: false,
            // 仪表数据
            monitorData: {},
            tableData: [],
            // 目标id
            targetStandardId: '',
            // 图片base64
            imgUrl: '',
            user: getStorage('userInfo'),
            // 报告名称
            reportName: '',
            // 提示框
            centerDialogVisible: false,
            ruleForm: { fileVal: 0 },
            rules: {
                fileVal: [
                    {
                        required: true,
                        message: '请选择下载文件类型',
                        trigger: 'change'
                    }
                ]
            },
            options: [
                {
                    value: 0,
                    label: '下载word'
                }
                // ,
                // {
                //     value: 1,
                //     label: '下载pdf'
                // }
            ],
            src: '',
            // 报告类型
            reportType: '',
            // 文件格式url
            wordUrl: ''
        };
    },
    created () {},
    mounted () {
        const str = this.$route.path.split('/');
        this.reportType = str[str.length - 1];
    },
    methods: {
        // 切换页码
        changePage (val) {
            this.searchFrom.pageIndex = val;
            this.$emit('changePage', this.searchFrom);
        },
        // 跳转至详情
        jumpList (item) {
            console.log(item, 'jumpList');
            if (item.reportEditStatus != 1 && item.examineState === 0) {
                this.message(
                    'info',
                    `编辑周期已过，禁止编辑！！！ 编辑周期：${item.splicingDate}!`
                );
                return;
            }
            this.$emit('jumpList', item);
        },
        remove (item) {
            delTarget(item.id).then(res => {
                this.$message.success('删除成功');
                this.$emit('getList');
            });
        },
        // 预览未达标
        previewNo (item) {
            this.show = true;
            this.previewVisible = true;
            this.targetStandardId = item.id;
            this.reportName = item.reportName;
            // getMonitorInfo({ targetStandardId: 1 }).then(res => {
            //     console.log(res, 'monitorData', item.id, this.monitorData);
            //     this.monitorData = res || {};
            // });
            getReportDetail(item.id).then(res => {
                // console.log(res, 'res==');
                this.tableData = res ? res.targetStandardList : [];
            });
        },
        // 上传
        upload (item) {
            console.log(item, 'item');
            if (item.reportEditStatus === 0) {
                this.message('info', '此报告已过可编辑日期!');
                return;
            }
            this.$emit('addAssert', this.$route.query.name);
            this.$emit('getParam', item.id);
        },
        // 在线查看
        preview (item) {
            // console.log(item.wordUrl);
            window.open(
                `${this.productBaseUrl}8012/onlinePreview?url=` +
                    encodeURIComponent(
                        Base64.encode(
                            `${this.productBaseUrl}8082/dosm/file/${item.wordUrl}`
                        )
                    ),
                '_blank'
            );
        },
        downLoadFile (item) {
            this.centerDialogVisible = true;
            this.wordUrl = item.wordUrl;
            this.targetStandardId = item.id;
            this.reportName = item.reportName;
        },
        // examineState:2 发布状态下载文件
        download (formName) {
            // console.log(this.ruleForm.fileVal, this.targetStandardId);
            this.$refs[formName].validate(valid => {
                if (valid) {
                    const str = this.$route.path.split('/');
                    downloadReport({
                        id: this.targetStandardId,
                        wordUrl: this.wordUrl,
                        reportType: str[str.length - 1]
                    }).then(res => {
                        // console.log(res, 'rest');
                        this.downloadFile(res);
                        this.centerDialogVisible = false;
                    });
                }
            });
        },
        // 下载文件通用方法
        downloadFile (res) {
            //   文件下载
            const url = window.URL.createObjectURL(new Blob([res]));
            const elementA = document.createElement('a');
            elementA.style.display = 'none';
            const fileName = this.reportName + '.docx';
            elementA.href = url;
            elementA.setAttribute('download', fileName);
            document.body.appendChild(elementA);
            elementA.click();
            document.body.removeChild(elementA);
            window.URL.revokeObjectURL(url);
        },
        // examineState:1 下载未达标
        downImgbase () {
            const canvasList = document.getElementsByTagName('canvas');
            const imgList = [];
            const str = this.$route.path.split('/');
            for (let i = 0; i < this.tableData.length; i++) {
                imgList.push({
                    urlFile: canvasList[i].toDataURL('png'),
                    name: this.tableData[i].name,
                    id: this.tableData[i].id,
                    reportCode: this.tableData[i].indexX,
                    reportType: str[str.length - 1]
                });
            }
            // console.log(canvasList, imgList, 'canvasList');
            // const fileList = {
            //     urlFile: imgUrl,
            //     id: this.targetStandardId,
            //     reportType: this.reportType
            // };
            // console.log(fileList);
            uploadImg(this.targetStandardId, imgList).then(res => {
                // console.log(res, 'res-=-');
                this.downloadFile(res);
                // console.log(res, 'img===');
            });
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/reprotCard.scss";
.reportCard {
    padding: 20px;
}
</style>
